import React from 'react';
// 使用百度地图实现千锋21校区分布
import { useEffect } from 'react';
import { getlocInfo } from '@/api/cinema'
const Index = () => {
    useEffect(() => {
        // 请求对应的坐标点
        getlocInfo().then(res => {
            console.log('res', res);
            const locArr = res.data.paginate.slice(0, 21);
            // 创建地图实例
            var map = new window.BMapGL.Map("container");
            // 设置地球模式
            map.setMapType(window.BMAP_EARTH_MAP);
            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            // 设置地图的旋转角度和倾斜角度
            map.setHeading(64.5);   //设置地图旋转角度
            map.setTilt(73);       //设置地图的倾斜角度

            locArr.map(item => {
                // 设置地图的中心点坐标
                var point = new window.BMapGL.Point(item.gpsaddress.split(',')[0], item.gpsaddress.split(',')[1]);
                // 地图初始化，同时设置地图展示级别
                map.centerAndZoom(point, 12);
                // 创建点标记
                var marker1 = new window.BMapGL.Marker(point);

                // 创建信息窗口
                var opts = {
                    width: 200,
                    height: 100,
                    title: '当期地址'
                };
                // 创建地理编码实例      
                var myGeo = new window.BMapGL.Geocoder();
                // 根据坐标得到地址描述    
                myGeo.getLocation(point, function (result) {
                    if (result) {
                        // alert(result.address);
                        var infoWindow = new window.BMapGL.InfoWindow(result.address, opts);
                        // 点标记添加点击事件
                        marker1.addEventListener('click', function () {
                            map.openInfoWindow(infoWindow, point); // 开启信息窗口
                        });
                        // 在地图上添加点标记
                        map.addOverlay(marker1);
                    }
                });


            })
        })

    }, []);

    return (
        <div id='container' style={{
            width: '100%',
            height: '100%'
        }}>

        </div>
    );
}

export default Index;
